
.example-appear {
    opacity: 0.01;
}

.example-appear.example-appear-active {
    opacity: 1;
    transition: opacity .5s ease-in;
}

.example-enter, .example-leave {
    -webkit-transition: all .25s;
    transition: all .25s;
}

/*自动找加-enter的样式作为进入时候的动画的初始样式，-enter-active的样式作为进入时候的动画的结束样式*/
.example-enter, .example-leave.example-leave-active {
    opacity: 0.01;
}


.example-enter.example-enter-active, .example-leave {
    margin-left: 0;
    opacity: 1;
}



.example-leave.example-leave-active {
    margin-left: -128px;
}

.example-enter {
    margin-left: 128px;
}


.animateExample {
    display: block;
    height: 128px;
    position: relative;
    width: 384px;
}

.animateItem {
    color: white;
    font-size: 36px;
    font-weight: bold;
    height: 128px;
    line-height: 128px;
    position: absolute;
    text-align: center;
    -webkit-transition: all .25s; /* TODO: make this a move animation */
    transition: all .25s; /* TODO: make this a move animation */
    width: 128px;
}